<template>
    <div class="factory-box">
        <div class="field">
            <mt-field
                    label="房间号"
                    placeholder="请输入房间号码"
                    type="number"
                    v-model="room_id"></mt-field>
            <mt-field
                    label="密码"
                    placeholder="请输入房间密码"
                    type="password"
                    v-model="password"></mt-field>
        </div>
        <div class="act">
            <mt-button class="btn" size="small" type="primary" @click="submit" :disabled="loading">
                <span v-if="!loading">进入</span>
                <mt-spinner type="triple-bounce" color="white" v-if="loading"></mt-spinner>
            </mt-button>
        </div>

        <div class="history" v-if="history">
            <div class="title">历史登录</div>
            <div class="body">
                <span class="item" v-for="item of reverseHistory" @click="qlogin(item.room_id, item.password)">房间:{{item.room_id}}号</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import apiUrl from '@/api/apiUrl'
    import {compile, uncompile} from "../../../utils/tool";
    export default {
        name: "index",
        data () {
            return {
                room_id: '',
                password:'',
                loading: false,
                history: localStorage.getItem('lh')
            }
        },
        computed: {
            reverseHistory () {
                let lh = localStorage.getItem('lh') ? localStorage.getItem('lh').split(',') : []
                let arr = []
                lh.forEach(v => {
                    let tmp = uncompile(v).split('@')
                    arr.push({
                        room_id: tmp[0],
                        password: tmp[1]
                    })
                })
                return arr
            }
        },
        methods: {
            qlogin(room_id, password) {
                this.room_id = room_id
                this.password = password
                this.submit()
            },
            submit () {
                this.$set(this, 'loading', true)
                if (!this.room_id) {
                    this.$set(this, 'loading', false)
                    return Toast('请输入房间号')
                }
                if (!this.password) {
                    this.$set(this, 'loading', false)
                    return Toast('请输入房间密码')
                }
                let params = new URLSearchParams()
                params.append('room_id', this.room_id)
                params.append('password', this.password)
                this.$http.post(apiUrl.api.roomLogin, params).then(res => {
                    if (res.data.code === 0) {

                        let timestamp3 = new Date().getTime() + res.data.result.expire_in * 1000
                        // 存储用户状态
                        sessionStorage.setItem('room_id', this.room_id) // room_id
                        sessionStorage.setItem('room_token', res.data.result.token) // token
                        sessionStorage.setItem('expire_in', timestamp3)  // 过期时间
                        this.$router.replace({name: 'factory-chat'})

                        // 历史记录
                        let lh  = localStorage.getItem('lh')
                        let str = compile(`${this.room_id}@${this.password}`)
                        if (lh) {
                            let arr = lh.split(',')
                            let flag = arr.some(v => {
                                return v === str
                            })
                            if (! flag) {
                                arr.push(str)
                                localStorage.setItem('lh', arr.join(','))
                            }
                        } else {
                            localStorage.setItem('lh', str)
                        }

                        Toast('ok')
                    } else {
                        Toast(res.data.msg)
                    }
                    this.$set(this, 'loading', false)
                }).catch (err => {
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped lang="less">
@import "../../../assets/css/bases";
    .act {
        margin-top: @big;
        display: flex;
        align-items: center;
        justify-content: center;
        .btn {
            width: 80%;
        }
    }
    .history {
        margin-top: @big;
        padding: @default;
        .title {
            border-bottom: @gray solid 1px;
            color: @gray;
            line-height: @big;
        }
        .body {
            padding-top: @middle;
            display: flex;
            .item {
                border: #999 solid 1px;
                padding: 5px;
                border-radius: 5px;
                color: #999;
            }
        }
    }
</style>